<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Raleway:100,300,500,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
  <link rel="stylesheet" href="css/app.css">
  <title>Aurora Grove</title>
</head>

<body>

  <nav class="navbar navbar-expand-md navbar-dark">
    <a href="#" class="navbar-brand">
      <h3 class="mb-0">Aurora Grove</h3>
    </a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#mainNavbar">
      <span class="navbar-toogler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNavbar">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="#showcase" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#icons" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="#explore" class="nav-link">Explore</a>
        </li>
        <li class="nav-item">
          <a href="#newsletter" class="nav-link">Contact</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" data-toggle="modal" data-target="#bookingModal">Book</a>
        </li>
      </ul>
    </div>
  </nav>

  <section id="showcase" class="d-flex justify-content-center align-items-center">
    <div id="overlay"></div>
    <div id="header" class="container text-white text-center">
      <h3 class="display-5 mb-0">MODERN CAMPING</h3>
      <h1 class="display-1">AURORA GROVE</h1>
      <p class="lead d-none d-md-block">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
      <button id="book" class="btn btn-lg btn-primary px-5" data-toggle="modal" data-target="#bookingModal">BOOK NOW</button>
    </div>
  </section>

  <section id="icons">
    <div class="container text-center mt-5">
      <h2>YOU SHOW UP, WE PITCH THE TENT</h2>
      <div class="row">
        <div class="col-md-4 p-3">
          <img src="https://i.postimg.cc/vHFC7dYB/tent.png" alt="Tent" class="img-fluid d-none d-md-inline">
          <h3>Amenities You Want</h3>
          <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis velit blanditiis at
            necessitatibus accusantium, dolores vitae maxime odio officiis optio quibusdam possimus quis consectetur
            distinctio debitis architecto sint aperiam dolore!</p>
        </div>
        <div class="col-md-4 p-3">
          <img src="https://i.postimg.cc/BbDkWmg4/campfire.png" alt="Campfire" class="img-fluid d-none d-md-inline">
          <h3>Amenities You Want</h3>
          <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis velit blanditiis at
            necessitatibus accusantium, dolores vitae maxime odio officiis optio quibusdam possimus quis consectetur
            distinctio debitis architecto sint aperiam dolore!</p>
        </div>
        <div class="col-md-4 p-3">
          <img src="https://i.postimg.cc/44hrh3Tq/nature.png" alt="Nature" class="img-fluid d-none d-md-inline">
          <h3>Amenities You Want</h3>
          <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis velit blanditiis at
            necessitatibus accusantium, dolores vitae maxime odio officiis optio quibusdam possimus quis consectetur
            distinctio debitis architecto sint aperiam dolore!</p>
        </div>
      </div>
    </div>
  </section>

  <section id="explore">
    <div class="container text-center mt-2 p-3">
      <h3>WE’VE CREATED A CAMPING EXPERIENCE THAT’S TURN-KEY AND HASSLE FREE.</h3>
      <div class="row m-2">
        <div class="col-md-6 p-3">
          <div class="card">
            <img src="https://i.postimg.cc/P54GrFkq/winter.jpg" alt="winter" class="card-img-top">
            <div class="card-body">
              <h2 class="card-title text-primary">EXPERIENCE</h2>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur, officiis.</p>
              <a href="" class="btn btn-lg btn-outline-primary">Go Somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-md-6 p-3">
          <div class="card">
            <img src="https://i.postimg.cc/15Dhb3Cw/dogs.jpg" alt="" class="card-img-top">
            <div class="card-body">
              <h2 class="card-title text-primary">EXPLORE</h2>
              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur, officiis.</p>
              <a href="" class="btn btn-lg btn-outline-primary">Go Somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="quotes">
    <div class="container text-center mt-4">
      <h3>WHAT OUR HAPPY CAMPERS ARE SAYING</h3>
      <div class="row">
        <div class="col-md-4 my-2">
          <i class="fas fa-quote-left fa-2x text-primary mb-3"></i>
          <blockquote class="blockquote">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer">Mark Twain</footer>
          </blockquote>
        </div>
        <div class="col-md-4 my-2">
          <i class="fas fa-quote-left fa-2x text-primary mb-3"></i>
          <blockquote class="blockquote">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer">Mark Twain</footer>
          </blockquote>
        </div>
        <div class="col-md-4 my-2">
          <i class="fas fa-quote-left fa-2x text-primary mb-3"></i>
          <blockquote class="blockquote">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer">Mark Twain</footer>
          </blockquote>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="container mt-5">
      <div class="row">

        <div class="col-lg-7 mb-3">
          <div id="mainCarousel" class="carousel slide" data-ride="carousel">

            <div class="carousel-inner">

              <div class="carousel-item active">
                <img src="https://i.postimg.cc/Gp55HWgb/coffee.jpg" alt="coffee" class="d-block w-100">
              </div>
              <div class="carousel-item">
                <img src="https://i.postimg.cc/C5yr4jVt/fire.jpg" alt="fire" class="d-block w-100">
              </div>
              <div class="carousel-item">
                <img src="https://i.postimg.cc/Y9LygdTY/caribou.jpg" alt="caribou" class="d-block w-100">
              </div>
              <div class="carousel-item">
                <img src="https://i.postimg.cc/vTWq2cYm/trees.jpg" alt="trees" class="d-block w-100">
              </div>

            </div>

            <a href="#mainCarousel" class="carousel-control-prev" data-slide="prev" role="button">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a href="#mainCarousel" class="carousel-control-next" data-slide="next" role="button">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>

          </div>
        </div>

        <div class="col-lg-5">
          <h3>CAMPING MADE COZY</h3>
          <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi dolores voluptas sit. Quia
            harum debitis fugit! Veritatis a vero in laborum vel, explicabo tenetur repudiandae modi at dolorum
            architecto rem sequi suscipit maxime unde similique, est impedit vitae nihil exercitationem?</p>
          <a href="">See for yourself <i class="fa fa-arrow-right"></i></a>
        </div>



      </div>
    </div>
  </section>

  <section>
    <div class="container text-center mt-5">
      <h3>WHAT OTHERS ARE SAYING</h3>
      <h5 class="text-primary">#AURORAGROVE</h5>
      <div class="row mt-4">
        <div class="col-6 col-lg-3 mb-4">
          <img src="https://i.postimg.cc/T3TSSqWv/social1.png" alt="" class="img-fluid">
        </div>
        <div class="col-6 col-lg-3 mb-4">
          <img src="https://i.postimg.cc/q7b92hqV/social2.png" alt="" class="img-fluid">
        </div>
        <div class="col-6 col-lg-3 mb-4">
          <img src="https://i.postimg.cc/qRNWwJ6t/social3.png" alt="" class="img-fluid">
        </div>
        <div class="col-6 col-lg-3 mb-4">
          <img src="https://i.postimg.cc/Dw5DKJqJ/social4.png" alt="" class="img-fluid">
        </div>
        <div class="col-6 col-lg-3 mb-4">
          <img src="https://i.postimg.cc/hGjY4DrC/social5.png" alt="" class="img-fluid">
        </div>
        <div class="col-6 col-lg-3 mb-4">
          <img src="https://i.postimg.cc/Jh4fyc15/social6.png" alt="" class="img-fluid">
        </div>
        <div class="col-6 col-lg-3 mb-4">
          <img src="https://i.postimg.cc/3JXVnbNZ/social7.png" alt="" class="img-fluid">
        </div>
        <div class="col-6 col-lg-3 mb-4">
          <img src="https://i.postimg.cc/pT341wKs/social8.png" alt="" class="img-fluid">
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="container text-center mt-4">
      <i class="fas fa-quote-left fa-2x text-primary mb-3"></i>
      <blockquote class="blockquote">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque, veniam dolorum quidem illo eos ipsam
          voluptatem
          officiis quas impedit fugit, maxime numquam placeat, odio ducimus vel voluptas assumenda architecto optio sit
          non
          aperiam harum qui. Facilis mollitia atque nostrum maiores.
        </p>
        <footer class="blockquote-footer">Mark Twain</footer>
      </blockquote>
    </div>
  </section>

  <section id="newsletter" class="bg-dark">
    <div class="container text-white text-center py-5">
      <p class="lead">JOIN OUR NEWSLETTER FOR DEALS AND UPDATES AND OFFERS</p>
      <div class="row justify-content-center">
        <div class="col-10 col-sm-8 col-md-6 col-lg-4">
          <form action="" class="form-inline">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Your Email" id="">
              <div class="input-group-append">
                <button class="btn btn-primary">Join Now</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <section id="footer" class="p-3 bg-secondary">
    <ul class="nav text-center justify-content-center flex-column flex-sm-row">
      <li class="nav-item">
        <a href="#" class="nav-link text-white">FAQ</a>
      </li>
      <li class="nav-item">
        <a href="#explore" class="nav-link text-white">EXPERIENCE</a>
      </li>
      <li class="nav-item">
        <a href="#explore" class="nav-link text-white">EXPLORE</a>
      </li>
      <li class="nav-item">
        <a href="#newsletter" class="nav-link text-white">CONTACT</a>
      </li>
      <li class="nav-item">
        <a href="" class="nav-link text-white" data-toggle="modal" data-target="#bookingModal">BOOK NOW</a>
      </li>
    </ul>
  </section>

  <div class="modal" id="bookingModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">New Booking</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Please fill out the form below and we'll get back to you as soon as possible</p>
          <form>
            <div class="form-group">
              <label for="email">Email Address</label>
              <input type="email" class="form-control" id="email" placeholder="name@example.com">
            </div>
            <div class="form-group">
              <label for="adults">Number of Adults</label>
              <select class="form-control" id="adults">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
              </select>
            </div>
            <div class="form-group">
              <label for="children">Number of Children</label>
              <select class="form-control" id="children">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
              </select>
            </div>
            <div class="form-group">
              <label for="requests">Additional Requests</label>
              <textarea id="requests" rows="3" class="form-control"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary">Submit Request</button>
          <button class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>


  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha256-VsEqElsCHSGmnmHXGQzvoWjWwoznFSZc6hs7ARLRacQ="
    crossorigin="anonymous"></script>

</body>

</html>